<template>
  <button type="button" @click="toggle">显示 | 隐藏</button>
  <h1 v-text="info"></h1>
  <transition name="lhz"
              appear
              appear-class="appear-from"
              appear-active-class="appear-active"
              appear-to-class="appear-to"
              enter-from-class="enter-from"
              enter-active-class="enter-active"
              enter-to-class="enter-to"
              leave-from-class="leave-from"
              leave-active-class="leave-active"
              leave-to-class="leave-to"
              @before-enter="beforeEnter"
              @enter="enter"
              @after-enter="afterEnter"
              @before-leave="beforeLeave"
              @leave="leave"
              @after-leave="afterLeave"
              :duration="{enter:5000,leave:5000}"
              :css="true">
    <div class="box" :class="{me:isMe}" @mouseenter="isMe=!isMe" @mouseleave="isMe=!isMe" v-show="isShow"></div>
  </transition>
</template>

<script>
export default {
  name: "LhzE",
  data() {
    return {
      isMe: false,
      isShow: true,
      info: ''
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
    beforeEnter(element) {
      console.log(element);
      this.info = '';
      this.info = 'beforeEnter';
    },
    enter(element, done) {
      console.log(element);
      this.info += '\tenter';
      setTimeout(() => {
        done();
      }, 5000);
    },
    afterEnter(element) {
      console.log(element);
      this.info += '\tafterEnter';
    },
    beforeLeave(element) {
      console.log(element);
      this.info = '';
      this.info = 'beforeLeave';
    },
    leave(element, done) {
      console.log(element);
      this.info += '\tleave';
      setTimeout(() => {
        done();
      }, 5000);
    },
    afterLeave(element) {
      console.log(element);
      this.info += '\tafterLeave';
    },
  }
}
</script>

<style scoped>
.box {
  width: 450px;
  height: 450px;
  background-color: #00aa00;
  text-align: center;
  position: absolute;
  top: 100px;
  left: 100px;
  transition: 500ms;
}

.me {
  transform: rotate(45deg);
}

/* 初始化之前 */
.appear-from {
  width: 0px;
  height: 0px;
}

/* 初始化进入中 */
.appear-active {
  transition: 3s all ease;
  transform: rotate(45deg);
}

/* 初始化进入完成 */
.appear-to {
  width: 450px;
  height: 450px;
  transform: rotate(0deg);
}

/* 进入之前 */
.enter-from {
  width: 0px;
  height: 0px;
}

/* 进入中 */
.enter-active {
  transition: 3s all ease;
}

/* 进入完成 */
.enter-to {
  width: 450px;
  height: 450px;
}

/* 离开之前 */
.leave-from {
  width: 450px;
  height: 450px;
}

/* 离开中 */
.leave-active {
  transition: 3s all ease;
}

/* 离开完成 */
.leave-to {
  width: 0px;
  height: 0px;
}
</style>